<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>留言板首页</title>
	<link rel="stylesheet" href="Tpl/css/bootstrap.min.css">
	<style type="text/css">
        .col-md-12 .content{
        	width:100%;
        }

        #online{
        	position: relative;width:100%;height: 51.6px;/*background: red;*/top:-71.6px;
        }
        .login{
        	width:260px;position: absolute;top:10px;right:100px;
        }

        .not_online{
        	width:500px;position:absolute;top:10px;right:0;
        }
        .navbar-nav{
            position:relative;z-index:1;
        }
        #float-r{
            position:relative;
        }
        #float-r button{
            position: absolute;right:120px;bottom: 15px;
        }
        #float-r a{
            position: absolute;right:50px;bottom: 15px;
        }

	</style>
</head>
<body>
    <!-- 导航条 -->
    <div>
    	
    	<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-9">
    	    <nav class="navbar navbar-inverse">
            <ul class="nav navbar-nav">
	            <li class="active"><a href="#">留言</a></li>
	            <li><a href="zhuce.php">注册</a></li>
	            <li><a href="login.php">登录</a></li>
            </ul>
            </nav>
        </div>


        <!-- 登录状态 -->
        <div id="online">        
        <?php if(isset($_SESSION['username'])){ ?>
            <div class="login">
            <!-- 已登录 -->
                <button type="button" class="btn btn-large btn-primary disabled" disabled="disabled" style="width:200px;">
                     <?php echo $_SESSION['username'] ?>
                </button>
                <a  href="loginout.php" class="btn btn-large btn btn-danger">退出</a>
            </div> 
        <?php }else{ ?>
            <!-- 未登录 -->
            <form class="form-inline not_online" action="login.php" method="post">
                <input type="text" name='username' class="input-small btn" placeholder="账号">
                <input type="password" name='password' class="input-small btn" placeholder="密码">            
                <button type="submit" class="btn btn btn-success">登录</button>
            </form>
        <?php } ?>
        </div>


        <div>
            <!-- 留言分页  这里的$db  改为从$db截取出来的一段 $_slice -->
            <?php  foreach($_slice as $key=>$value){ ?>
	        	<div id="float-r" class="alert <?php echo $color[array_rand($color)] ?> msgRow " role="alert" >
	        	        <strong><?php echo $value['username'] ?></strong>
	        	        <p><?php echo $value['content'] ?>
	        	        	(<?php echo date('Y-m-d H:i:s',$value['create_time']) ?>)</p>
                       
	        	        <!-- 删除数据要找到相应的id，操作删除id -->

                        <!-- 用Ajax删除数据  重做  把a链接换成button  重新给button添加功能-->
	        	        <p><button delid=<?php echo $key ?> class="btn btn-danger delBtn">删除</button></p>
	        	        <a href="./xiugai.php?id=<?php echo $key ?>" class="btn btn-success">修改</a>
	        	</div>
	            <!-- <div class="alert" role="alert"><strong>Lucy 说：</strong>夏天来了。。。。</div>
	            <div class="alert alert-warning" role="alert"><strong>明明 说：</strong>准备高考了，压力山大。。</div>
	            <div class="alert" role="alert"><strong>她娘的婶婶 说：</strong>小王今天该娶媳妇了</div> -->
            <?php } ?>
        </div>
  
        <div>
        	<form class="navbar-form navbar-left" role="search" style="width:100%;" method="post" action="recieve.php">
        	    <div class="col-md-12">
				    <div class="form-group">
				        <label for="username">用户名</label>
				        <input type="text" class="form-control" placeholder="Jack" name="username">
				    </div>
				    <button type="submit" class="btn btn-info">留言</button>
			    </div>
			    <div class="col-md-12" style="margin-top:30px;">
			        <textarea class="form-control content" rows="3" name="content"></textarea>
			    </div>

			    <a href="index.php?page=1">第一页</a>
		        <a href="index.php?page=<?php echo ($page-1) ?>">上一页</a>
		        <a href="index.php?page=<?php echo ($page+1) ?>">下一页</a>
		        <a href="index.php">最后一页</a>
			</form>
        </div>

   <!-- 引jq -->
    <script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('.delBtn').click(function(event) {
                //抓到要删除数据的id
                var id =  $(this).attr('delid');
                // alert(id);die;    
                delBtn = $(this);//点到哪个就把它存在变量里

                $.ajax({
                    url: 'ajaxDel.php',
                    type: 'POST',
                    dataType: 'json',
                    data: {msgid: id},
                })
                .done(function(data) {
                    if(data.error==0){
                        alert(data.info);
                        delBtn.parents('.msgRow').remove();
                    }
                    //alert('成功');
                })
                .fail(function(data) {
                    alert('失败');
                })
               
                
            });

        })




    </script>
    </div>
	
</body>
</html>